<template >
    <div class="myOrder" >
        <ul class="tabs clearfix" >
            <a class="tab" :class="{on: num === 0}" @click="clicktab(0)">所有订单</a>
            <a class="tab" :class="{on: num === 1}" @click="clicktab(1)">待支付订单</a>
            <a class="tab" :class="{on: num === 2}" @click="clicktab(2)">已完成订单</a>
            <a class="tab" :class="{on: num === 5}" @click="clicktab(5)">未评价订单</a>
            <a class="tab" :class="{on: num === 3}" @click="clicktab(3)">已失效订单</a>
            <a class="tab" :class="{on: num === 4}" @click="clicktab(4)">已取消订单</a>
        </ul>
        <div class="notdata" v-if="notdata">
            <i class="iconfont">&#xe6be;</i>暂时没有数据
        </div>
        <div class="person_info" v-if="!notdata">
            <div class="order_content" v-for="(item, index) in pageObj.order" :key="index">
                <div class="order_title clearfix">
                    <span class="order_num">订单号：{{item.code}}</span>
                    <span class="time">下单时间：{{item.orderdate}}</span>
<!--                    <span id="sname"><i class="el-icon-s-shop"></i> {{item.sname}}</span>-->
                    <el-link style="float: right;margin-right: 20px;color: #ec7e00" @click="delOrder(item.code)">
                        <i class="el-icon-delete">删除订单</i>
                    </el-link>
                    <i class="money" style="float:right;margin-right: 30px;color: red">总计:￥{{item.totalmoney}}</i>
                </div>
                <ul class="body_right clearfix" style="margin-top: 10px">
                    <li v-if="item.paysort === 0 && item.state===0">微信支付</li>
                    <li v-if="item.paysort === 1 && item.state===0">支付宝支付</li>
                    <li class="alipay"
                        v-if="item.state === 1"
                        v-loading="loading"
                        element-loading-background="white"
                    >
                        等待支付,剩余<br>
                        <span style="color: red">
                            {{ timeFormat(item.lastTime,item.code,index) }}
                        </span>
                    </li>
                    <li class="alipay" v-if="item.state === 0">已支付</li>
                    <li class="alipay" style="color: #d51423" v-if="item.state === 3">订单已失效</li>
                    <li class="alipay" v-if="item.state === 4" style="color: #ec7e00">订单已取消</li>
                    <!--                        <li v-if="item.status === 1">-->
                    <!--                            <router-link :to="{name: 'DetailId', params: {id: item.courseId}}" class="go_btn">进入学习</router-link>-->
                    <!--                        </li>-->
                    <li v-if="item.state === 1 ">
                        <a class="go_btn go_pay" @click="choosePaySort(item.code)">
                            继续支付
                        </a>
                        <a @click="quxiao(item.code)" class="cancel" style="cursor: pointer">取消订单</a>
                    </li>
                </ul>
                <div class="order_body clearfix">
                    <div class="body_left clearfix" v-for="(items,index) in item.goodsList" :key="index">
                        <div  style="height: 100px">
                            <img :src="items.img" alt=""
                                 style="width: 192px;height: 108px;display: inline-block;float: left">
                            <div style="margin-top: 0px;margin-left: 220px">
                                <div style="color: brown;font-size: 16px;font-family: 幼圆">
                                    店铺名称:{{items.sname}}
                                </div>
                                <div style="margin-top:10px; color: brown;font-size: 16px;font-family: 幼圆">
                                    商品名称:{{items.gname}}
                                </div>
                                <div style="margin-top:10px;  color: brown;font-size: 16px;font-family: 幼圆">
                                    商品总价:{{items.totalmoney}}￥
                                </div>
                                <div style="float:right;margin-left: 356px;margin-top: -50px;">
                                    <router-link v-if="items.commentstatus===0 && item.state===0" :to="{name: 'DetailId',params:{id:items.id}}">
                                        <div>
                                            <el-button type="info" plain style="margin-right: 39px;">去评价</el-button>
                                        </div>
                                    </router-link>
                                    <router-link v-if="items.commentstatus===1 && item.state===0" :to="{name: 'DetailId',params:{id:items.id}}">
                                        <div>
                                            <el-button type="info" plain style="margin-right: 39px;">修改评价</el-button>
                                        </div>
                                    </router-link>
                                </div>
                                <div id="goumaishuliang">
                                    购买数量:{{items.num}}{{items.unitname}}
                                </div>
                            </div>
                        </div>

                        <div>
                            <el-divider id="xian"></el-divider>
                        </div>
                    </div>

                </div>
            </div>
            <!--微信支付-->
            <el-dialog
                    @close="closeWx"
                    title="收银台"
                    :visible.sync="dialogVisible"
                    width="30%"
            >
                <div style="text-align: center">
                    <p>微信支付 {{payResult.price}}元</p>
                    <div style="border: 1px solid #f3f3f3;width: 220px;padding: 10px;margin: 0px auto">
                        <vue-qr
                                :text="payResult.codeUrl"
                                :margin="0"
                                colorDark="green"
                                :logoSrc="require('/src/assets/img/wx.jpg')"
                                colorLight="#fff"
                                :size="200">
                        </vue-qr>
                    </div>
                </div>
                <el-divider></el-divider>
                <div style="font-size: 13px">
                    提示:<br>
                    支付成功前请勿手动关闭页面<br>
                    二维码两小时内有效,请及时扫码支付<br>
                </div>

            </el-dialog>
            <!--支付宝支付弹出层-->
            <el-dialog
                    @close="closeAli"
                    title="支付页面"
                    :visible.sync="dialogVisible2"
                    width="30%">
                <div style="text-align: center" >
                    <p>支付宝支付{{payResult.price}}元</p>
                </div>
                <div style="border: 1px solid #f3f3f3;width: 220px;padding: 10px;margin:0px auto;">
                    <vue-qr
                            style="padding-left:10px "
                            :text="payResult.codeUrl"
                            :margin="0"
                            colorDark="blue"
                            :logoSrc="require('/src/assets/img/ali.png')"
                            colorLight="#fff"
                            :size="200">
                    </vue-qr>
                </div>
                <el-divider></el-divider>
                <div style="font-size: 13px">
                    提示:<br>
                    支付成功前请勿手动关闭页面<br>
                    二维码两小时内有效，请及时扫码支付<br>
                </div>
            </el-dialog>
            <!--选择支付类型的弹出层-->
            <el-dialog
                    title="提示"
                    :visible.sync="dialogVisible3"
                    width="40%"
                    @close="clearCode"
            >
                <span>
                    <el-button @click="payByAli">
                    <img style="padding: 0" width="200" height="60"
                         src="">
                </el-button>
                <el-button @click="payByWx">
                    <img width="200" height="60"
                         src="">
                </el-button>
                    <!--<el-button type="success" @click="payByWx">微信支付</el-button>
                    <el-button type="primary" @click="payByAli">支付宝支付</el-button>-->
                </span>
            </el-dialog>

            <!--分页-->
            <div class="mgt20">
                <el-pagination
                        background
                        style="float: right;margin-top: 20px; margin-bottom: 22px"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageObj.currentPage"
                        :page-sizes="[1, 5, 10, 15]"
                        :page-size="pageObj.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageObj.total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import YSide from '@/components/account/Side'
    import DPage from '@/components/Page'
    import vueQr from 'vue-qr'

    export default {
        name: "MyOrder",

        data() {
            return {
                //订单编号
                code:0,
                //选择支付类型的弹出层
                dialogVisible3:false,
                //支付宝支付弹出层
                dialogVisible2:false,
                //查询支付状态定时器
                timer:"",
                //加载
                loading: false,
                num: 0,
                showPay: false,
                payData: null,
                notdata: false,
                zhuangtai: "",
                commentstatus:"",
                //用户id
                HuiYuanId: window.sessionStorage.getItem("memberId"),
                timer1: '',
                dialogVisible: false, //弹出框
                //得到响应的结果
                payResult: {
                    codeUrl: "", //二维码的地址
                    code: "", //订单号
                    price: 0.00, //支付的金额
                    logoSrc: "/src/assets/img/wx.jpg" //微信二维码中间小logo
                },
                pageObj: {
                    //当前页面--》page
                    currentPage:1,
                    //每页条数--》limit
                    pageSize:5,
                    //总条数
                    total:'',


                    order:[
                        {
                            //倒计时时间
                            lastTime: 0,
                            id: '',
                            code: '',
                            orderdate: '',
                            goodsList: [],
                            businessInfo: [],
                            totalmoney: '',
                            paysort: '',
                            state: '',
                            time: '',
                        },
                    ]
                },
                order_no: this.$route.query.out_trade_no,
            }
        },
        methods: {
            //微信支付
            payByWx(){
                var that = this;
                var code = this.code;
                this.$http.post("/detail/orderPay/payForOrder/0/" + this.code).then(function (resp) {
                    if (resp.data.code === 2000) {
                        that.dialogVisible = true
                        that.payResult = resp.data.data;
                        that.payResult.code = code;
                        //定时器
                        that.timer = setInterval(()=>{
                            that.queryPayStatus();
                        },2000)
                    }else if (resp.data.code===5001){
                        that.$message.error(resp.data.msg)
                    }
                     if (resp.data.code===7000){
                        that.$message.error(resp.data.msg);
                        that.dialogVisible3 = false
                        that.initOrderList();

                    }

                })
            },
            //支付宝
            payByAli(){
                var that = this;
                var code = this.code;
                this.$http.post("/detail/orderPay/payForOrder/1/" + this.code).then(function (resp) {
                    if (resp.data.code === 2000) {
                        //显示支付宝二维码
                        that.dialogVisible2 = true
                        that.payResult = resp.data.data;
                        that.payResult.code = code;
                        //定时器
                        that.timer = setInterval(()=>{
                            that.queryPayStatus();
                        },2000)
                    }else if (resp.data.code===5001){
                        that.$message.error(resp.data.msg)
                    }if (resp.data.code===7000) {
                        that.$message.error(resp.data.msg);
                        that.dialogVisible3 = false
                        that.initOrderList();
                    }

                })
            },
            //关闭选择支付类型弹出层清除订单编号
            clearCode(){
                this.code = 0;
            },
            //选择支付类型的方法
            choosePaySort(code){
                this.dialogVisible3=true;
                this.code = code;

            },
            //关闭微信支付页面
            closeWx(){
                //消除定时器
                clearInterval(this.timer);
                this.timer = null;
            },
            closeAli(){
                //消除定时器
                clearInterval(this.timer);
                this.timer = null;
            },
            //倒计时
            daojishi(i, obj) {
                var that = this;
                // 计算剩余时间戳
                var paytime = new Date(obj.orderdate);
                paytime.setMinutes(paytime.getMinutes() + 30)
                let daojishi = setInterval(() => {
                    let residue = paytime - new Date();
                    if (residue >= 0) {
                        // 对每行的剩余时间进行设置
                        obj.lastTime = residue;


                    } else {
                        obj.lastTime = -1;
                        // 清除定时器
                        clearInterval(daojishi);
                    }
                }, 1000);
            },
            //剩余时间格式化
            timeFormat(lastTime,code,index) {
                if (lastTime > 1000) {
                    let days = this.addZero(
                        Math.floor(lastTime / 1000 / 60 / 60 / 24)
                    ); //天
                    let hours = this.addZero(
                        Math.floor((lastTime / 1000 / 60 / 60) % 24)
                    ); //时
                    let minutes = this.addZero(
                        Math.floor((lastTime / 1000 / 60) % 60)
                    ); //分
                    let seconds = this.addZero(Math.floor((lastTime / 1000) % 60)); //秒
                    return `${minutes}分钟${seconds}秒`;
                } else if(lastTime<1000 && lastTime >0) {
                    setTimeout(() => {
                        this.$http.get("home/api/order/updateStateToFailure?code="+code).then(res=>{
                            if (res.data.code===2000) {
                                this.pageObj.order[index].state = 3
                                that.pageObj.currentPage = 1;
                                that.initOrderList();
                            }
                        })
                        return "已超时";
                    }, 1000);
                    return "00分钟01秒";
                } else if (lastTime===-1){
                    this.$http.get("home/api/order/updateStateToFailure?code="+code).then(res=> {
                        if (res.data.code === 2000) {
                            this.pageObj.order[index].state = 3
                            this.pageObj.currentPage = 1;
                            this.initOrderList();
                        }
                    })
                }
            },
            // 个位补零
            addZero(d) {
                return parseInt(d) < 10 ? "0" + d : d;
            },
            //删除订单
            delOrder(code) {
                this.$confirm(`确定要删除订单吗?`, {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(resp => {
                    var that = this;
                    this.$http.get("/home/api/order/deleteOrder?code=" + code).then(res => {
                        if (res.data.code === 2000) {
                            that.$message.success(res.data.msg);
                            that.initOrderList();
                        }else {
                            that.$message.error(resp.data.msg);
                        }
                    })
                })
            },
            queryPayStatus() {
                //继续支付
                var that = this;
                this.$http.get("/detail/orderPay/paystatus/" + this.payResult.code).then(r => {
                    if (r.data.code === 2000) {
                        clearInterval(this.timer);
                        //如果支付成功，清除定时器
                        that.$message.success(r.data.msg);
                        //消除定时器
                        clearInterval(this.timer);
                        that.timer = null;
                        that.dialogVisible = false;
                        that.dialogVisible2 = false;
                        that.dialogVisible3 = false;
                        //刷新界面
                        that.initOrderList();
                        //that.$router.go(0);
                        //跳转到课程详情页面观看视频
                        // that.$router.push({path: '/DetailId/:id' + that.payResult.course_id})
                    }
                })
            },
            pay(item) {
                this.payData = item;
                this.showPay = true;
            },
            //头部选择的按钮
            clicktab(int) {
                this.num = int;
                this.pageObj.currentPage = 1;
                this.getOrderList(int);

            },

            //改变当前页数
            handleSizeChange(val) {
                this.pageObj.pageSize=val;
                this.initOrderList();
            },
            //改变当前每页的条数
            handleCurrentChange(val) {
                this.pageObj.currentPage=val;
                this.initOrderList();
            },

            //订单数据重载，，判断要查询所有还是查询支付或未支付订单
            getOrderList(int) {
                if (int === 1) {//查询待支付订单
                    this.zhuangtai = 1;
                    this.commentstatus="";
                } else if (int === 2) {//已支付订单
                    this.zhuangtai=0;
                    this.commentstatus="";
                } else if (int === 0) {//查询所有
                    this.zhuangtai = "";
                    this.commentstatus="";
                } else if (int === 3) {//已失效订单
                    this.zhuangtai = 3;
                    this.commentstatus="";
                } else if (int === 4) {//已取消订单
                    this.zhuangtai = 4;
                    this.commentstatus="";
                } else if (int === 5) {//未评价订单
                    this.zhuangtai=0;
                    this.commentstatus=0;
                }
                this.initOrderList()
            },

            //获取订单信息
            initOrderList() {
                this.notdata = false;
                var that = this;
                this.$http.get("/home/api/order/findOrder?currentPage="+this.pageObj.currentPage+"&pageSize="+this.pageObj.pageSize+"&state="+this.zhuangtai+"&commentstatus="+this.commentstatus).then(function (resp) {
                    console.log(resp)
                    that.pageObj.order = resp.data.data.records;
                    that.pageObj.total = resp.data.data.total;
                    setTimeout(() => {
                        that.loading = false
                    }, 1500);
                    for (var i = 0;i<that.pageObj.order.length;i++) {
                        that.daojishi(i, that.pageObj.order[i])

                    }
                    if (resp.data.data.total === 0) {
                        that.notdata = true;
                    }
                })
            },

            //取消支付
            quxiao(code) {
                this.$confirm(`确定要取消订单吗?`, {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var that = this;
                    this.$http.get("/home/api/order/cancelOrder?code=" + code).then(function (resp) {
                        if (resp.data.code === 2000) {
                            that.$message.success(resp.data.msg);
                        } else {
                            that.$message.error(resp.data.msg);
                        }
                        that.initOrderList();
                        //that.$router.go(0);
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消支付失败'
                    });
                })


            }

        },
        mounted() {
            this.pageObj.currentPage = 1;
            this.pageObj.pageSize = 5;
            this.getOrderList();
            this.loading = true;
        },
        components: {
            YSide,
            DPage,
            vueQr
        }

    }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    #daojishi {
        height: 60px;
        width: 175px;
        float: right;
        margin-top: 100px;
        margin-right: -182px;
    }

    #goumaishuliang {
        color: lightslategray;
        font-size: 16px;
        margin-bottom: 0px;
        margin-left: 377px;
        float: left;
    }

    #pingjia {
         margin-top: 168px;
         margin-left: 377px;
         float: left;
     }



    #xian {
        display: block;
        height: 1px;
        width: 720px;
        margin: 24px 0;
    }

    #sname {
        margin-left: 50px;
    }


    #goodsname {
        margin-left: 15px;
        margin-top: -10px;
    }

    #img {
        width: 50px;
        height: 50px;
    }

    .person_info {
        padding: 25px;
        min-height: 400px;
    }

    .order_content {
        border-bottom: 2px solid rgba(245, 245, 245, 1);
        margin-top: 20px;
        position: relative;

        &:first-child {
            margin-top: 0;
        }
    }

    .order_title {
        line-height: 36px;
        padding-left: 20px;
        background: rgba(245, 245, 245, 1);
        font-size: 14px;
        color: #999;

        .order_type {
            margin-right: 10px;
            color: #0099FF;
        }

        .time {
            margin-left: 30px;
        }
    }

    .order_body {
        margin: 15px 0;
    }

    .body_left {
        padding: 0 20px;
        width: 740px;

        // position: relative;
        .img_box {
            width: 120px;
            height: 59px;
            display: inline-block;
        }

        img {
            width: 120px;
            height: 59px;
        }

        p {
            // position: absolute;
            width: 336px;
            white-space: inherit;
            margin-left: 10px;
            // left: 160px;
            font-size: 14px;
            color: #999;
        }
    }

    .body_right {
        float: right;

        li {
            float: left;
            height: 50px;
            width: 100px;
            text-align: center;
            border-left: 2px solid rgba(245, 245, 245, 1);
            font-size: 14px;
            color: #999;

            &.alipay {
                color: #0099FF;
            }

            &.money {
                color: #D51423;
            }

            .cancel {
                display: block;
                text-align: center;
                color: #999;

                &:hover {
                    color: #D51423;
                }
            }

            .go_btn {
                display: block;
                width: 76px;
                height: 30px;
                margin-left: 10px;
                line-height: 30px;
                background: #fff;
                border-radius: 6px;
                font-size: 14px;
                cursor: pointer;
                color: #999;
                border: 1px solid #999;

                &.go_pay {
                    border-color: orange;
                    color: orange;
                }

                &:hover {
                    color: #D51423;
                    border-color: #D51423;
                }
            }
        }
    }

    .notdata {
        text-align: center;
        padding: 60px 0;
        font-size: 30px;
        color: #999;
        min-height: 400px;

        i {
            font-size: 30px;
            padding-right: 12px;
        }
    }

    .page {
        margin-bottom: 20px;
        margin-top: 10px;
    }
</style>
